<template>
  <div>
    <Title />
    <!--  商品展示-->
    <div class="context">
      <!--商品图片 -->
       <img :src="goodsInfo.list_pic_url" alt="" />
      <!-- 七天退换货 -->
      <Tips />
      <!-- 大概介绍 -->
      <div class="info">
        <h3>{{goodsInfo.name}}</h3>
        <!-- <p>慢回弹海绵,时尚设计。</p> -->
        <div>￥{{goodsInfo.retail_price}}元</div>
      </div>
      <!--  选择规格 -->
      <van-cell
        class="showSku"
        title="选择规格"
        is-link
        @click="show = !show"
      />
      <!--  商品参数-->
      <div class="attribute">
        <h4>商品参数</h4>
      </div>
      <!--  常见问题-->
      <div class="issue">
        <div class="line_title">
          <span></span>
          <h3>常见问题</h3>
        </div>
        <ul class="issue_content">
          <li>
            <h3>购买运费如何收取?</h3>
            <p>
              单笔订单金额（不含运费）满88元免邮费;不满88元，每单收取10元运费。(港澳台地区需满
            </p>
          </li>
          <li>
            <h3>使用什么快递发货?</h3>
            <p>
              严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区(港澳台地区除
            </p>
          </li>

          <li>
            <h3>如何申请退货?</h3>
            <p>
              1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，
            </p>
          </li>
          <li>
            <h3>如何开具发票?</h3>
            <p>
              1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（(APP仅限2.4.0及以
            </p>
          </li>
        </ul>
      </div>
      <!-- 大家都在看 -->
      <div class="line_title">
        <span></span>
        <h3>大家都在看</h3>
      </div>
      <!-- 大家都在看展示 -->
      <LookGoods :goodsList="goodsList[0]" />

      <van-action-sheet
        v-model="show"
        close-on-click-action
      >
        <div class="action-show">
          <div >
            <img :src="goodsInfo.list_pic_url" alt="" />
          </div>
          <ul>
            <li class="">￥&nbsp;{{goodsInfo.retail_price}}&nbsp;元</li>
            <li>剩余&nbsp;&nbsp;&nbsp;{{goodsStock}}&nbsp;&nbsp;&nbsp;件</li>
            <li>请选择</li>
          </ul>
        </div>
        <div class="addgoodsCount">
          <div class="addgoodsNum">购买数量</div>
          <div class="showBtn">
            <van-stepper v-model="goodsNum" :max="goodsStock"/>
          </div>
        </div>
       <div class="mess"></div>
      </van-action-sheet>
      
      <!-- 加入购物车 -->
      <MyGoodsAdd :proCount="proCount" @addToCart="addToCart"/>
    </div>
    <!--商品展示结束-->

    <!-- 回到顶部 -->
    <TobackTop />
  </div>
</template>

<script>
import Title from '../../components/BrandTitle.vue'
import Tips from '../../components/Tips.vue'
import LookGoods from '@/components/ProGoods.vue'
import MyGoodsAdd from '@/components/MyGoodsAdd.vue'
import TobackTop from '@/components/BackTop.vue'
import {mapGetters, mapState} from 'vuex'
import {GetCartSum, AddToCart } from '@/api'
export default {
    name:'productdetail',
    components:{
        Title,
        Tips,
        MyGoodsAdd,
        TobackTop,
        LookGoods
    },
     data() {
      return {
       show: false,
          goodsStock:100,//商品库存
          goodsNum:1,//添加数量
          proCount:0,//购物车数量
      };
    },
    mounted() { 
    // 请求action(请求服务器)
      this.$store.dispatch("getHomeDB") 
      this.$store.dispatch("getGoods",this.$route.params.id)
      this.$store.dispatch("getGoodsList",this.$route.params.id)
      console.log("goodsList",this.goodsList);

      // 先判断是否登录
      let token = localStorage.getItem('userToken')
      if (token) {
        // 调用获取购物车数量的函数
        this.getCartCountBtn();
      }else{
         this.$toast('您还未登录...')
      }
    },
    computed:{
    ...mapGetters(['categoryList',]),
      ...mapState({
      goodsInfo: (state) => state.goods.goodsInfo,
      goodsList: (state) => state.goods.goodsList
    }),
    },
    methods: {
      onChange(index) {
        this.current = index;
      },
      // 获取购物车的数量
      getCartCountBtn() {
        GetCartSum().then(res => { 
          console.log("商品数量", this.proCount,res);
          this.proCount = res.count
          
        })
      },
      addToCart() {
      // 判断商品消息框是否打开
      if (this.show) {
        // 判断用户是否登录
        let token = localStorage.getItem('userToken')
        if (token) {
          // 添加商品的数量
          console.log(this.goodsInfo.list_pic_url);
          AddToCart({
            id: this.$route.params.id,
            img:this.goodsInfo.list_pic_url,
            goodsName:this.goodsInfo.name,
            price:this.goodsInfo.retail_price,
            num: this.goodsNum,
          }).then(res => {
            this.$toast.success("添加成功");
            // 关闭sku
            this.show = false;
           this.proCount= res.count 
            console.log("====购物车数",this.proCount);
            console.log("-------------添加的商品",this.goodsInfo.name);
            console.log("---------res========",res);
          })
        } else {
         this.$toast.fail("====请先登录");
        }
      } else {
        // 判断商品消息框未打开,先打开
        this.show = true
      }
    },
      
    },
    // 监视器
    watch: {
      $route(to, from) {
        if (to.path == from.path) {
          return;
        } else {
          this.$router.go(0); // 刷新页面
        }
      },
    }
}
</script>

<style lang="less" scoped>
.context {
  padding-bottom: 100px;
  line-height: 1;
}
img{
  width:100%;
}
.info {
  background: #fff;
  text-align: center;
  padding: 15px 0;
  h3 {
    font-weight: normal;
    font-size: 0.2rem;
    line-height: 30px;
  }
  p {
    color: #999;
    font-size: 0.14rem;
    line-height: 30px;
  }
  div {
    color: darkred;
    font-size: 0.14rem;
    line-height: 30px;
  }
}

.van-action-sheet {
  margin-bottom: 40px;
  border-top: 1px solid #ccc;
  
}
.action-show{
  display: flex;
  flex-shrink: 0;
  >div{
    flex-shrink: 0;
    width: 120px;
    height: 120;
    margin: 12px 12px 12px 0;
    overflow: hidden;
    border-radius: 4px;
    >img{
      width: 100%;
    }
  }  
  >ul{
     margin: 12px 12px 12px 0;
    padding: 12px 20px 12px 0;
    >li:nth-child(1){
      margin-left: -2px;
    color: #ee0a24;
    }
    >li:nth-child(2),li:nth-child(3){
      margin-top: 8px;
      color: #969799;
      font-size: 12px;
      line-height: 16px;
    }
  }
}
.addgoodsCount{
  
  >.addgoodsNum{
    margin: 12px 12px ;
    float: left;
  }
  >.showBtn{
    float: right;
     margin: 12px 12px;
  }
 
}
 .mess{
   margin-top: 40px;
    width: 100%;
    height: 40px;
    // background-color: palegreen;
  }


.attribute {
  background: #fff;
  padding: 5px 2%;
  overflow: hidden;
  h4 {
    font-weight: normal;
    font-size: 0.2rem;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-left: 0.1rem;
  }
  ul {
    padding: 0 0.1rem;
    li {
      background: #efefef;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      span {
        width: 24%;
        color: #999;
        text-align: right;
      }
      section {
        flex: 1;
        padding-left: 0.1rem;
        // 最多显示一行的文字，多余的内容会被省略
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

// 这里要深度修改样式，如果不加/deep/,样式在控制台上看不到，也就是没有给这个div加上样式，或者把style中的scoped去掉，也可加上样式。

/deep/.product_image {
  p {
    display: block;
    margin: 0;
    img {
      width: 100%;
      display: block;
    }
  }
}

.line_title {
  width: 100%;
  height: 40px;
  position: relative;
  font-size: 0.18rem;
  background: #fff;
  span {
    width: 50%;
    height: 2px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  h3 {
    width: 30%;
    height: 40px;
    font-weight: normal;
    font-size: 0.18rem;
    background: #fff;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
ul {
  width: 97%;
  margin: 0 auto;
  > li {
    width: 100%;
  }
}

.issue {
  background: #fff;
  .issue_content {
    h3 {
      font-weight: normal;
      height: 40px;
      padding-left: 0.2rem;
      line-height: 40px;
      font-size: 0.16rem;
      position: relative;
      padding-right: 0.1rem;
      &::before {
        content: "";
        width: 4px;
        height: 4px;
        background: darkred;
        border-radius: 50%;
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -2px;
      }
    }
    p {
      font-size: 0.14rem;
      padding-left: 0.2rem;
      padding-right: 0.1rem;
      color: #666;
    }
  }
}
.van-goods-action {
  z-index: 9999;
}
.van-sku-container {
  min-height: auto;
}

// 轮播图右下加角标
.custom-indicator {
  margin-top: 20px;
  position: absolute;
  color: #fff;
  right: 6px;
  bottom: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
}
</style>